<template>
	<view class="content">
		<view class="nursing">
			<view class="title" style="margin-bottom: 0;">
				<view class="titleIcon">
					<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/d3a233f006e34226.png" mode=""></image>
				</view>
				<view class="titleMsg">家庭医生签约服务
				</view>
			</view>

		</view>
		<view class="nursing">
			<view class="title" style="margin-bottom: 0;">
				<view class="titleIcon">
					<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/0d9f0dc55a984b51.png" mode=""></image>
				</view>
				<view class="titleMsg">签约服务
				</view>
			</view>
			<view class="flex align-center  border-bottom mt-2" style="height:80rpx ;">
				<view class="text-secondary password-title">患者姓名:</view>
				<view class="flex align-center w-100">

					<input type="text" v-model="userName" maxlength="16" placeholder="请输入真实姓名"
						placeholder-style="font-size:28rpx;color:#CCCCCC;" />

				</view>
			</view>


		</view>
		<view class="nursing">
			<view class="title" style="margin-bottom: 0;">
				<view class="titleIcon">
					<image src="http://loto.oss-cn-shanghai.aliyuncs.com/email/d4266363ee8f4a06.png" mode=""></image>
				</view>
				<view class="titleMsg">签约资料
				</view>
			</view>
			<view class="flex align-center  border-bottom mt-2" style="height:80rpx ;">
				<view class="text-secondary password-title">身份证:</view>
				<view class="flex align-center w-100" >
			
					<input type="text" v-model="idCard" maxlength="18" placeholder="请输入身份证"
						placeholder-style="font-size:28rpx;color:#CCCCCC;"  class="w-100"/>
			
				</view>
			</view>
			<!-- <view class="photoBox">
				<view class="addPhoto" @click="openMessage">
					
					<view class="iconfont icon-paishe xiangji">
					</view>
				</view>
				<view class="photo" v-for="(item,index) in photo" :key="index"
					style="background-color: rgba(243, 246, 246, 1);" >
					<image :src="item" mode="aspectFit"></image>
					<text class="iconfont icon-a-qingkongpng cha" @click.stop="del(index)"></text>
				</view>
			</view> -->
		</view>
		<view class="into into1">
			<view class="save" style="background-color: #3c8eff" @click="save">提交</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/common/js/ossutil/uploadFile.js'
	import {
		uploadSigningReportById
	} from '@/apis/report/index.js'
	import {
		getLocation4
	} from '@/common/js/location.js'
	export default {
		data() {
			return {
				list: [],
				userName: '',
				photo: [],
				idCard:''
			}
		},
		methods: {
			openMessage() {
				this.add()
			},
			save() {
				if (this.idCard.length < 18) {
					plus.nativeUI.toast('请输入18位身份证!')
					return
				}
				if (!this.userName) {
					plus.nativeUI.toast('请填写患者姓名!')
					return
				}
				getLocation4().then(res => {
					let data = {
						...res,
						serviceName: '家庭医生签约服务',
						userName: this.userName,
						idCard: this.idCard
						// signedPicture: this.photo.join(),
					}
	
					uploadSigningReportById(data).then(res1 => {
						if (res1.success) {
							// #ifdef APP
							plus.nativeUI.toast('提交成功')
							// #endif
							setTimeout(() => {
								uni.navigateBack(-1)
							}, 500)
	
						}
	
	
					}).catch(err => {
						// #ifdef APP
						plus.nativeUI.toast(err.object)
						// #endif
					})
				})
	
	
			},
			// 添加照片
			add() {
				let that = this
	
				if (this.photo.length > 6 || this.photo.length == 6) {
					plus.nativeUI.toast('最多添加6张图片!')
					// uni.showToast({
					// 	icon:'none',
					// 	title:'最多添加10张图片',
					// 	duration:1000,
					// })
				} else {
					uni.chooseImage({
						count: 6, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'],
						// sourceType: ['album'], //从相册选择
						success: function(res) {
							console.log(res, '..................')
							let tempFiles = res.tempFilePaths
							uni.showLoading({
								title: '上传中……',
							})
							let progress = 0
							//上传图片 请求多个图片
							for (var i = 0; i < tempFiles.length; i++) {
								uploadImage(
									tempFiles[i],
									'feedback/',
									(result) => {
										console.log('打印的结果', result)
										that.bol = false
										that.url = result
										that.photo.push(result) //如果图片一次性就超过这个值怎么使他赋的值回退
										progress += 1
										if (progress >= tempFiles.length) {
											uni.hideLoading()
										}
									},
									(error) => {
										plus.nativeUI.toast('上传失败')
										progress += 1
										if (progress >= tempFiles.length) {
											uni.hideLoading()
										}
										// uni.showToast({
										// 	title:'上传失败',
										// 	icon:'error'
										// })
									}
								)
							}
						},
						fail(e) {
							if (e.errCode == 11) {
								requestAndroid(
									'android.permission.CAMERA',
									'摄像头'
								)
							}
							// console.log(e,'shibaihuid........')
						},
					})
				}
			},
			//删除照片
			del(index) {
				uni.showModal({
					title: '确认删除当前图片吗',
					confirmColor: '#FF6A00',
					success: (res) => {
						if (res.confirm) {
							this.photo.splice(index, 1)
						}
					},
				})
			},
		}
	}
</script>

<style lang="less">
	.content {
		padding-top: 16rpx;
		min-height: 100vh;
		background: linear-gradient(179deg, #60A3FE 0%, rgba(116, 175, 254, 0) 100%, rgba(116, 175, 254, 0) 100%);
	}

	.into {
		width: 100%;
		height: 144rpx;
		// background: rgba(216, 216, 216, 0);
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 42rpx;
		box-shadow: 0rpx -6rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
		background-color: red;

		&.myinto {
			justify-content: flex-start;
		}

		.save {
			width: 698rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			background: #3c8eff;
			border-radius: 8rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}

	.into1 {
		margin-top: 190rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff !important;
		z-index: 999;
	}

	.photoBox {
		padding: 24rpx 0rpx;
		display: flex;
		flex-wrap: wrap;
		background: #ffffff;
		margin-bottom: 8rpx;
		// background-color: red;

		.addPhoto {
			width: 128rpx;
			height: 128rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			border: 2rpx dashed rgba(0, 0, 0, 0.87);
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.photo {
			width: 128rpx;
			height: 128rpx;
			border-radius: 20rpx;
			margin-right: 26rpx;
			margin-bottom: 26rpx;
			position: relative;

			// background: blue;
			image {
				// width: auto;
				// height: auto;
				// max-width: 128rpx;
				// max-height: 128rpx;
				width: 128rpx;
				height: 128rpx;
				border-radius: 20rpx;
			}

			.cha {
				position: absolute;
				font-size: 48rpx;
				right: -20rpx;
				top: -25rpx;
			}
		}
	}

	.nursing {
		width: 698rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-bottom: 24rpx;
		padding: 44rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			line-height: 48rpx;
			display: flex;
			margin-bottom: 32rpx;
			position: relative;

			.type {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ff4f4f;
				position: absolute;
				right: -40rpx;
			}

			.titleMsg {
				font-size: 40rpx;
				width: 500rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 48rpx;
				margin-left: 8rpx;
				word-wrap: break-word;
				word-break: normal;
			}

			.profitPrice {
				position: absolute;
				right: 0;
			}
		}

		.titleIcon {
			width: 48rpx;
			height: 48rpx;

			// background-color: #3C8EFF;
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.consume_title {
			width: 540rpx;
			margin: 16rpx 0;
			font-size: 28rpx;
			font-weight: 400;
		}

		.password-title {
			min-width: 140rpx;
			white-space: nowrap;
			margin-right: 32rpx;
			
			
		}

		.consume_detail {
			box-sizing: border-box;
			width: 100%;
			margin: 0 auto 16rpx;
			background: rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			font-weight: 400;
			font-size: 24rpx;
			padding: 22rpx 26rpx;
		}

		.empty {
			margin-top: 12rpx;
		}

		.consume_tip {
			font-size: 24rpx;

			color: rgba(234, 32, 39, 1);
			margin-top: 6rpx;
			// margin: 0 auto;
		}

		.nursingP {
			display: flex;
			justify-content: space-between;
		}
	}
</style>